<template>
  <div class="studentApplication">
    <!-- 获取到（/选中的）的数据 -->
    {{ selectedStudent }}

    <!-- 堆页面 -->
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息验证"></el-step>
      <el-step title="联系方式验证"></el-step>
      <el-step title="学历验证"></el-step>
    </el-steps>
    <!-- 定义form表单 -->
    <el-form
      label-position="left"
      label-width="100px"
      style="width: 400px; margin-left: 50px"
    ></el-form>

    <!-- 放置第一个表单 -->
    <div v-show="active == 0">
      <step1 />
      <!-- 放置第二个表单 -->
    </div>
    <!-- 定义三个盒子对象 active 1=>3  -->
    <div v-show="active == 1">
      <!-- 放置表单项 -->
      <step2 />
    </div>
    <div v-show="active == 2">
      <step3 />
      <!-- 放置第三个表单 -->
    </div>

    <el-button v-if="btnStatus == false" autofocus="true" @click="next"
      >下一步</el-button
    >
    <el-button
      v-if="btnStatus == true"
      type="success"
      icon="el-icon-check"
      @click="toOK"
    ></el-button>
    <el-button v-if="active >= 0" style="margin-top: 12px" @click="pre"
      >上一步</el-button
    >

    <el-button icon="el-icon-close" type="danger" @click="toClose"></el-button>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import step2 from "../components/step2.vue";
import step3 from "../components/step3.vue";
import step1 from "../components/step1.vue";
export default {
  name: "studentApplication",
  components: {
    step1,
    step2,
    step3,
  },
  props: ["form"],
  data() {
    return {
      //按钮状态
      btnStatus: false,
      active: 0, //绑定
      dataForm: mapGetters.student, //??????
    };
  },
  created() {
    if (this.selectedStudent.schedule != 0) {
      this.active = this.selectedStudent.schedule;
    } else {
      this.selectedStudent.schedule = this.active;
    }
  },
  methods: {
    //步骤条下一步的方法
    next() {
      this.selectedStudent.schedule = this.active + 1;
      if (this.active++ > 1) {
        // this.active = 0;
        //如果btnStatus状态变为true,则显示出对勾按钮
        this.btnStatus = true;
      }
      return (this.selectedStudent.schedule = this.active);
    },
    //步骤条上一步的方法
    pre() {
      this.selectedStudent.schedule = this.active - 1;
      if (this.active-- < 2) {
        this.active = 0;
      }
      if (this.active == 2) {
        this.btnStatus = false;
      }
      return (this.selectedStudent.schedule = this.active);
    },
    //如果拒绝？
    toClose() {
      console.log(this.selectedStudent.schedule);
      this.selectedStudent.status = -1;
      this.$router.push("controller/studentApply");
    },
    //如果通过？
    toOK() {
      // console.log(111);
      this.selectedStudent.status = 1;
      this.$router.push("controller/studentApply");
    },
  },
  computed: {
    ...mapState({
      student: "getstudents",
    }),
    ...mapGetters(["selectedStudent"]),
  },
};
</script>
<style scoped>
* {
  overflow: hidden;
}
</style>
